<template>
  <view class="searchPage">
    <!-- <cu-custom bgColor="my-theme-bg" :isBack="false">
            <block slot="backText">返回</block>
            <block slot="content">搜索页面</block>
        </cu-custom> -->

    <d-search-log
      :search_list_hot="search_list_hot"
      :store_key="store_key"
      @onClickDelAllApi="onClickDelAll"
      @onSearchNameApi="onSearchName"></d-search-log>

    <view
      @click="projiectList"
      class=""
      style="
        display: flex;
        align-items: center;
        padding: 20px 10px 0 5%;
        background: #fff;
      ">
      <!-- <u-section title="产业项目" sub-title="更多"></u-section> -->
      <view style="font-size: 14px; font-weight: 700; color: #14151a">
        推荐
        <image
          src="@/static/huo.png"
          style="width: 24rpx; margin-left: 7rpx"
          mode="widthFix"></image>
      </view>
    </view>
    <!--  -->
	  <view class="moreContent">
		  <view v-for="(item,index) in teacherData">
			  <view class="moreList" @click="handleDetail(item)">
				  <image class="imgs" :src="item.image" mode="aspectFill"></image>
				  <view class="u-flex u-flex-col u-row-around u-m-l-20">
					  <view class="cent-bo-b-l u-m-b-10 u-ellipsis-1" style="width: 63vw;display: flex;justify-content: flex-start">
						  <view style="color:#333;font-weight: bold">{{item.name}}</view>
<!--						  <view class="cent-bo-b-r u-m-l-20  u-ellipsis-1" style="color:#626161;font-weight: normal">{{item.job}}</view>-->
					  </view>
					  <view class="u-ellipsis-2" style="width: 63vw;" v-html="item.desc"></view>
				  </view>
			  </view>
		  </view>
	  </view>
    <!--  -->
  </view>
</template>

<script>
import dSearchLog from "@/uni_modules/d-search-log/components/d-search-log/d-search-logwc.vue";

export default {
  components: {
    dSearchLog: dSearchLog,
  },
  computed: {},

  data() {
    return {
      // color_border:"#ff00ff",
      search_list_hot: [],
      store_key: "search_list",
      teacherData: [],
    };
  },
  onLoad() {
    this.search_list_hot = [
      "手机",
      "电脑",
      "河南老君山",
      "三亚一游",
      "北京环球影城",
      "杭州西湖",
      "保定驴肉火烧",
      "保定狼牙山玻璃栈道",
    ];
    this.getlist();
  },
  methods: {
    getlist() {
      this.$new_http("finance.hotlist").then((res) => {
        console.log(res.data);
        this.teacherData = res.data;
      });
    },
    onClickDelAll() {
      console.log("[父级接收事件]：删除全部搜索记录");
    },
    // 名师详情
    handleDetail(val) {
      uni.navigateTo({
        url: "/pages/finance/teacherDetail?val=" + val.id,
      });
    },
    onSearchName(e) {
      console.log("[父级接收事件]：点击搜索:" + e);
    },
  },
};
</script>

<style lang="scss">
.searchPage {
  min-height: 100%;
  background: #fff;
  padding-bottom: 130rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .teacherList {
    padding: 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .teacher {
      width: 327rpx;
      // height: 390rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
      border-radius: 20rpx;
      margin-top: 30rpx;
      padding: 0 24rpx;
      padding-bottom: 23rpx;

      .teacherImg {
        width: 170rpx;
        height: 170rpx;
        border-radius: 50%;
        display: block;
        margin: 20rpx auto 26rpx;
      }

      .teacherTel {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;

        .tel {
          font-size: 24rpx;
          color: #666666;
        }
      }

      .teacherJj {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 33rpx;
        text-align: justify;
        font-style: normal;
        margin-top: 19rpx;
      }
    }
  }

  .my-theme-bg {
    /* background: linear-gradient(117deg,#60DF9D,#31CB7B); */
    color: #fff;
    background: #ed861f;
    /* background: linear-gradient(117deg,#23C0F7,#ff661e); */
    /* background: linear-gradient(90deg, #FFAA57, #23C0F7); */
    /* background: linear-gradient(90deg, #F37749, #FFAA57); */
    /* #FFAA57 */
    /* background-image: linear-gradient(45deg, #39b54a, #8dc63f); */
    /* color: #ffffff; */
    /* background-color: #f37b1d; */
    /* color: #ffffff; */
    /* background-color: #ffffff; */
    /* color: #666666; */
    /* linear-gradient(-27deg, #33CB80, #28D0AF) */
    /* background-image: line=ar-gradient(-27deg,#33CB80,#28D0AF); */
    /* color: #ffffff; */
    /* background-image: line=ar-gradient(-27deg,#fff,#fff); */
    /* background-image: line=ar-gradient(-27deg,#23C0F7,#23C0F7); */
    /* color: #000; */
  }
}
.moreContent {
	padding: 0 20rpx;
	.moreList {
		width: 100%;
		padding: 24rpx 10rpx 24rpx 10rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
		.imgs {
			width: 170rpx;
			height: 170rpx;
			border-radius: 20rpx;
		}
		
		.moreRight {
			width: 431rpx;
			margin-left: 28rpx;
			
			.companyType {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
			
			.name {
				font-family: PingFang;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			
			.hite {
				margin-top: 20rpx;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 42rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
